import dynamic from 'next/dynamic';
// import { Menu } from 'antd';
import Link from 'next/link';
import { ReactNode, useEffect, useState } from 'react';
import Logo from './logo';

// const MenuItem = Menu.Item;
// const SubMenu = Menu.SubMenu;
const Menu = dynamic(
	import('antd/lib/menu'),
	{ ssr: false }
);
const MenuItem = dynamic(
	import('antd/lib/menu/MenuItem'),
	{ ssr: false }
);
const SubMenu = dynamic(
	import('antd/lib/menu/SubMenu'),
	{ ssr: false }
);

export interface IMenu {
	icon?: string;
	label: string;
	key: string;
	url?: string;
	pkey?: string;
	children?: IMenu[];
}

export interface IProps {
	children: ReactNode;
	menus: IMenu[];
	title: string;
	logo: string;
	header: ReactNode;
	leftWidth: string;
	headHeight: string;
	pathname: string;
}

export default function Layout({
	children,
	menus,
	title,
	logo,
	header,
	leftWidth,
	headHeight,
	pathname
}: IProps) {
	const name = pathname.replace(/\[.*\]/, '');
	function getkeys(menu: IMenu, openkeys: Set<string>, selectkeys: string[]) {
		if (menu.children) {
			menu.children.forEach((m) => {
				getkeys(m, openkeys, selectkeys);
			});
		}
		if (name.startsWith(menu.url)) {
			if (menu.pkey) {
				openkeys.add(menu.pkey);
			}
			selectkeys.push(menu.key);
		}
	}
	const [o, selectedKeys] = menus.reduce(([o, s], c) => {
		getkeys(c, o, s);
		return [o, s];
	}, [new Set<string>(), []] as [Set<string>, string[]]);
	const openKeys = Array.from(o);
	return <>
		<div className='layout'>
			<div className='left' >
				<div className="logo" >
					<Logo src={logo} />
					<span className='logotitle'>{title}</span>
				</div>
				<div className='menu'>
					<Menu
						style={{ overflowY: 'auto' }}
						multiple={false}
						theme="dark"
						defaultSelectedKeys={selectedKeys}
						defaultOpenKeys={openKeys}
						// selectedKeys={selectedKeys}
						// openKeys={openKeys}
						// onClick={(i) => {
						// 	const [, ...rest] = i.keyPath;
						// 	setselectedKeys([i.key]);
						// 	setopenKeys(rest);
						// }}
						// onOpenChange={(keys) => {
						// 	setopenKeys(keys as string[]);
						// }}
						mode="inline"
					>
						{menus.map((menu) => {
							return generatemenu(menu);
						})}
					</Menu>
				</div>
			</div>
			<div className="right">
				<Header height={headHeight}>{header}</Header>
				<div className='content'>{children}</div>
			</div>
		</div>
		<style jsx>{`
.right{
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-left: ${leftWidth};
}
.menu{
	overflow-y:hidden;
}
.menu:hover{
	overflow: auto;
}
.left{
	position: fixed;
	left: 0;
	top:0;
	bottom:0;
	display: flex;
	flex-direction: column;
	flex: 0;
	background: #050F2A;
	width:${leftWidth};
	margin: 0;
	padding: 0;
	min-height: 100vh;
}
.layout{
	display: flex;
	height: 100vh;
	flex-direction: row;
}
.content{
	padding: 1rem 3rem;
background-color: #eef3f7;
}
.logo {
	display: flex;
	align-items: center;
	padding: 0.5rem;
	height: ${headHeight};
}
.logotitle{
	color:#008cff;
	font-size: 22px;
	cursor: pointer;
	margin-left: 0.5rem;
}
`}</style>
	</>;
}

/**
 * 根据数据创建菜单，但由于antd组件的bug不能使用函数组件
 */
function generatemenu(menu: IMenu) {
	if (!menu.url || (menu.children && menu.children.length > 0)) {
		return <SubMenu key={menu.key} icon={<Icon src={menu.icon} />} title={<span className='menulabel'>{menu.label}</span>}>
			{menu.children.map((m) => {
				return generatemenu(m);
			})}
			<style jsx>{`
.menulabel{
font-size: 1rem;
}
`}</style>
		</SubMenu>;
	}
	return <MenuItem key={menu.key} icon={menu.pkey ? <SubMenuIcon src={menu.icon} /> : <Icon src={menu.icon} />}>
		<Link href={menu.url}><a><span className={menu.pkey ? 'menulabel2' : 'menulabel'}>{menu.label}</span></a></Link>
		<style jsx>{`
.menulabel{
font-size: 1rem;
}
.menulabel2{
font-size: 0.9rem;
}
`}</style>
	</MenuItem>;
}

function Icon({ src }: { src: string }) {
	if (!src) {
		return <></>;
	}
	return <>
		<img className='icon' src={src} />
		<style jsx>{`
.icon{
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 0.5rem;
}
`}</style>
	</>;
}

function SubMenuIcon({ src }: { src: string }) {
	if (!src) {
		return <></>;
	}
	return <>
		<img className='icon' src={src} />
		<style jsx>{`
.icon{
	width: 1.1rem;
	height: 1.1rem;
	margin-right: 0.5rem;
}
`}</style>
	</>;
}

function Header({ children, height }: { children: ReactNode; height: string; }) {
	return <Shadow>
		<div className='c'>{children}</div>
		<style jsx>{`
.c{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	width: 100%;
	height: ${height};
}
`}</style>
	</Shadow>;
}

function Shadow({ children }: { children: ReactNode; }) {
	return <>
		<div>{children}</div>
		<style jsx>{`
div{
	box-shadow: 0.2rem 0.2rem 0.3rem #e0e0e0;
}
`}</style>
	</>;
}
